<!--
/**
* Author: gaohui
* Date: 2023-03-07 17:44
* Desc: MyTableData 表格组件
*/
-->

<template>
  <div v-loading="loadingStatus">
    <my-table :data="currentList">
      <template #empty v-if="!!$slots.empty">
        <slot name="empty"></slot>
      </template>
      <my-table-column
        v-for="(item, index) in tableConfig"
        v-bind="item"
        :key="item?.key || item.prop || index"
      ></my-table-column>
    </my-table>
    <div class="bottom-box mt10" v-if="currentHasPage">
      <el-pagination
        background
        small
        layout="total, sizes, prev, pager, next, jumper"
        :current-page="pageInfo.currentPage"
        :total="pageInfo.total"
        @size-change="sizeChange"
        :hide-on-single-page="false"
        @current-change="pageChange"
        :page-size="pageInfo.pageSize"
        :page-sizes="pageSizes"
        v-bind="paginationProps"
      ></el-pagination>
    </div>
  </div>
</template>

<script name="MyTableData" lang="ts" setup>
import { onMounted, computed, ref, PropType } from "vue";
import { TableConfigItemType } from "@/@types";
import pageLoadConfig from "@/@config";
import MyTable from "./MyTable.vue";
import MyTableColumn from "./MyTableColumn.vue";

const { pageSizeKey, pageNumKey, totalKey } = pageLoadConfig;
const props = defineProps({
  list: {
    type: Array,
  },
  // 表格列配置参数
  tableConfig: {
    type: Array as PropType<TableConfigItemType[]>,
    default: () => {
      return [];
    },
  },
  // 剩余查询参数
  search: {
    type: Object,
  },
  // 立即请求
  immediately: {
    type: Boolean,
    default: true,
  },
  // 查询接口
  fn: {
    type: Function,
  },
  // 是否显示分页按钮
  hasPage: {
    type: Boolean,
    default: true,
  },
  // 分页查询剩余参数
  paginationProps: {
    type: Object,
    default: () => {
      return {};
    },
  },
});

onMounted(() => {
  init();
});

const init = () => {
  props.immediately && getDataList();
};

// 分页配置选项
const pageSizes = [1, 10, 20, 30, 40, 50, 100];

const dataList = ref<any[]>([]);
const currentList = computed(() => {
  return props.list || dataList.value;
});

const pageInfo = ref({
  [pageSizeKey]: 10,
  [pageNumKey]: 1,
  [totalKey]: 0,
});

const searchData = computed(() => {
  return {
    ...pageInfo.value,
    ...props.search,
    total: undefined, //去除pageInfo 的total值
  };
});

// 数据加载状态
const loadingStatus = ref(false);
const getDataList = async () => {
  if (props.fn) {
    try {
      loadingStatus.value = true;
      const res = await props.fn(searchData.value);
      const listData = Array.isArray(res.data) ? res.data : res.data.list;
      pageInfo.value[totalKey] = res.data.total;
      dataList.value = listData;
      loadingStatus.value = false;
    } catch (err) {
      loadingStatus.value = false;
    }
  }
};

const currentHasPage = computed(() => {
  return props.hasPage && pageInfo.value.total;
});

const sizeChange = (pageSize) => {
  pageInfo.value[pageSizeKey] = pageSize;
  handelSearch();
};

const handelSearch = (isResetPage = true) => {
  isResetPage && (pageInfo.value[pageNumKey] = 1);
  getDataList();
};

const pageChange = (currentPage) => {
  pageInfo.value[pageNumKey] = currentPage;
  getDataList();
};
</script>
<style lang="scss" scoped>
.bottom-box {
  width: 100%;
  display: flex;
  justify-content: flex-end;
}
</style>
